<template>
    <div class="soul-pc-width clearfix margin-top-px20 x-margin-bottom-px20">
        <div class="float-left w-70 blog-left">
            <articleBox
                    v-for="art in arts"
                    v-bind:art="art"
                    v-bind:alive="alive">
            </articleBox>
            <!--v-on左边的是子组件被监听的事件，右边的是父组件的方法-->
            <page
                    v-on:paginationGetData="getData"
                    v-bind:page="page">
            </page>
        </div>
        <div class="float-right w-25 blog-right">
            <searchBox v-on:paginationSearch="search"></searchBox>
            <div class="hidden-placeholder"></div>
        </div>
    </div>
</template>
<script>
    import articleBox from './articleBox.vue';
    import searchBox from './searchBox.vue';
    import page from './page.vue';
    import indexResource from '../resources/indexResouce';
    import mock from '../mock/index';
    export default{
        data(){
            return {
                arts: '',
                title: '',
                page: {
                    total_page: -1,
                    page_num: -1,
                    page_size: -1
                },
                alive: false
            }
        },
        methods: {
            getData(currentPage){
                this.alive = false;
                this.alive = true;
                let title = this.title;
                indexResource.resource(this.$http).getArticles({
                    'page_num': currentPage,
                    'page_size': 3,
                    'title': title
                }).then(res=> {
                    this.arts = res.data.data;
                    this.page.total_page = res.data.total_page;
                    this.page.page_num = res.data.page_num;
                    this.page.page_size = res.data.page_size;
                }, res=> {
                    console.log('getArticles failed')
                });
            },
            search(title){
                this.alive = false;
                this.alive = true;
                this.title = title;
                indexResource.resource(this.$http).getArticles({
                    'page_num': 1,
                    'page_size': 3,
                    'title': title
                }).then(res=> {
                    this.arts = res.data.data;
                    this.page.total_page = res.data.total_page;
                    this.page.page_num = res.data.page_num;
                    this.page.page_size = res.data.page_size;
                }, res=> {
                    console.log('getArticles failed')
                });
            }
        },
        components: {
            articleBox,
            searchBox,
            page
        },
        mounted(){
            this.getData(1);
        }
    }
</script>
<style>
    .hidden-placeholder {
        height: 24rem;
    }
    .soul-pc-width{
        margin: 0 13%;
        box-sizing: border-box;
    }
    @media screen and (max-width: 960px) {
        .soul-pc-width {
            margin: 0 auto;
            width: 100%;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
    }
</style>